<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌手详情 - Music Website</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <a href="shouye.html">Music Website</a>
            </div>
            <nav>
               <ul>
                        <li><a href="{{ url_for('index') }}">首页</a></li>
                        <li><a href="#">发现</a></li>
                        <li><a href="{{ url_for('singer_page') }}">歌手</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">我的音乐</a></li>
                    </ul>
            </nav>
                <div class="search-bar">
                <input type="text" id="searchInput" placeholder="搜索歌曲、专辑、MV">
                <button id="searchButton">搜索</button>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="container">
            <!-- 歌手信息部分 -->
            <section class="singer-info">
                <div class="singer-header">
                    <img id="singerImage" src="https://via.placeholder.com/150" alt="Singer Image" class="singer-image">
                    <div class="singer-details">
                        <h1 id="singerName">歌手名称</h1>
                        <p id="singerBio" class="singer-bio">歌手介绍文字的部分内容... <span class="more-btn" id="moreBtn">更多</span></p>
                    </div>
                </div>
            </section>

            <!-- 热门歌曲、专辑、MV 按钮 -->
            <div class="singer-extra-buttons">
                <button id="songButton">热门歌曲</button>
                <button id="albumButton">专辑</button>
                <button id="mvButton">MV</button>
            </div>

            <!-- 热门歌曲部分 -->
            <section id="songSection" class="singer-songs">
                <h2>热门歌曲</h2>
                <ul class="songlist__header">
                    <li class="songlist_fengmian"></li>
                    <li class="songlist__header_name">歌曲</li>
                    <li class="songlist__header_album">专辑</li>
                    <li class="songlist__header_time">时长</li>
                </ul>
                <ul id="songList" class="songlist_list">
                    <!-- 热门歌曲项 -->
                </ul>
            </section>

            <!-- 专辑部分 -->
            <section id="albumSection" class="singer-albums" style="display: none;">
                <h2>专辑</h2>
                <div id="albumList" class="album-list">
                    <!-- 专辑项 -->
                </div>
            </section>

            <!-- MV部分 -->
            <section id="mvSection" class="singer-mvs" style="display: none;">
                <h2>MV</h2>
                <div id="mvList" class="mv-list">
                    <!-- MV项 -->
                </div>
            </section>
        </div>
    </main>



    <!-- 弹窗结构 -->
    <div id="bioModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeBtn">&times;</span>
            <h2>歌手详细介绍</h2>
            <p id="fullBio">完整的歌手介绍内容...</p>
        </div>
    </div>

     <div id="music-player">
    <img id="album-cover" class="album-cover" src="" alt="Album Cover">
    <div class="song-info">
        <div id="song-name">Song Name</div>
        <div id="singer-name">Singer Name</div>
    </div>
    <div class="controls">
        <button class="control-button" id="prev-button">⏮</button>
        <button class="control-button" id="play-button">▶️</button>
        <button class="control-button" id="next-button">⏭</button>
    </div>
    <div class="time-container">
        <div id="current-time">0:00</div>
        <div class="progress">

            <input type="range" id="progress-bar" min="0" max="100" step="1">
        </div>
        <div id="total-time">0:00</div>
    </div>
         <div id="current-lyric"></div>

    <div class="volume">
        <label for="volume-slider">音量</label>
        <input type="range" id="volume-slider" min="0" max="1" step="0.01">
    </div>
    <div class="play-mode" id="play-mode">🔁</div>
    <button class="lyrics" id="lyrics-button">显示歌词</button>
</div>
<div id="lyrics-modal">
    <div id="close-lyrics">关闭</div>
    <div id="lyrics-content">歌词内容</div>
</div>



    <!-- Video player modal -->
<div id="mvModal" class="modal">
    <div class="modal-content">
        <span class="close-btn" id="closeMvBtn">&times;</span>
        <iframe id="mvPlayer" width="100%" height="600" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>


    <!-- JavaScript 代码 -->
<script src="{{ url_for('static', filename='search.js') }}" defer></script>
    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
    <script src="{{ url_for('static', filename='research.js') }}" defer></script>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Music Website. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
